<template>
  <el-dialog
      title="跟进记录"
      :visible.sync="dialogVisible"
      width="1000px"
      top="5vh"
      :close-on-click-modal="false"
      append-to-body
  >
    <div class="table-layout">
      <SearchForm
          @search="onSearch"
          @reset="onReset"
          :search-list="searchList" :search-params="searchParams">
      </SearchForm>
      <el-card shadow="never">
        <div class="table-handle">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="onAdd">新增跟进</el-button>
        </div>
        <div class="table-box">
          <el-table
              stripe
              border
              v-loading="loading"
              max-height="500px"
              :data="tableData"
              row-key="id"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
          >
            <el-table-column prop="employee_name" label="员工姓名"/>
            <el-table-column prop="remark" label="跟进备注" show-overflow-tooltip/>
            <el-table-column prop="images" label="跟进图片">
              <template slot-scope="scope">
                <el-image
                    v-for="(url, index) in scope.row.images"
                    :key="index"
                    style="width: 50px; height: 50px; margin-right: 5px"
                    :src="url.url"
                    :preview-src-list="scope.row.images.map(item => item.url)"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="180"/>
            <el-table-column label="操作" width="120" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" style="color: red" size="mini" @click="onDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="table-pagination" style="margin-top: 20px">
          <el-pagination
              :current-page.sync="page"
              :page-sizes="[10, 20, 30, 50]"
              :page-size.sync="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="getList"
              @current-change="getList"
          />
        </div>
      </el-card>
    </div>
    <FollowupAdd ref="followupAdd" @success="getList"/>
  </el-dialog>
</template>

<script>
import { http } from '@/api'
import FollowupAdd from './add'

export default {
  name: 'HouseFollowup',
  components: {
    FollowupAdd
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      buildingId: null,
      buildingName: '',
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      searchList: [
        {
          label: '员工姓名',
          prop: 'employee_name',
          name: 'input',
          clearable: true
        },
        {
          label: '备注',
          prop: 'remark',
          name: 'input',
          clearable: true
        },
      ],
      searchParams: {
        employee_name: '',
        remark: ''
      },
    }
  },
  methods: {
    open(row) {
      this.buildingId = row.id
      this.buildingName = row.building_name
      this.dialogVisible = true
      this.onSearch()
    },
    onSearch() {
      this.page = 1
      this.onReset()
      this.getList()
    },
    onReset() {
      this.searchParams = {
        employee_name: '',
        remark: ''
      }
    },
    async getList() {
      this.loading = true
      try {
        const { data } = await http.houseFollowup.page({
          pageNum: this.page,
          pageSize: this.size,
          office_building_id: this.buildingId
        })
        this.tableData = data.rows.map(item => ({
          ...item,
        }))
        this.total = data.count
      } catch (error) {
        console.error('获取跟进记录失败:', error)
      } finally {
        this.loading = false
      }
    },
    onAdd() {
      this.$refs.followupAdd.open({
        office_building_id: this.buildingId,
        building_name: this.buildingName
      })
    },
    async onDelete(row) {
      try {
        await this.$confirm('确认删除该跟进记录?', '提示', {
          type: 'warning'
        })
        await http.houseFollowup.delete(row.id)
        this.$message.success('删除成功')
        this.getList()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除跟进记录失败:', error)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.table-layout {
  margin: 0;
}
</style>
